<template>
  <Card class="count-views">
    <div class="card">
      <div class="card__header">
        <span class="label">总访问量</span>
        <span class="value"><count-to :end="8846"></count-to></span>
      </div>

      <div class="card__container">
        <v-chart :option="chartOption" autoresize></v-chart>
      </div>

      <div class="card__footer">
        <span class="label">日访问量</span>
        <span class="value"><count-to :end="1351"></count-to></span>
      </div>
    </div>
  </Card>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data () {
    return {
      chartOption: {
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },
        xAxis: {
          type: 'category',
          data: [
            '00:00',
            '2:00',
            '4:00',
            '6:00',
            '8:00',
            '10:00',
            '12:00',
            '14:00',
            '16:00',
            '18:00',
            '20:00',
            '22:00'
          ],
          boundaryGap: false
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            show: true,
            status: 'shadow',
            z: -1,
            shadowStyle: {
              color: 'transparent'
            },
            type: 'shadow'
          }
        },
        series: [
          {
            name: '总访问量',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: [
              '1200',
              '1400',
              '1008',
              '1411',
              '1026',
              '1288',
              '1300',
              '800',
              '1100',
              '1000',
              '1118',
              '1322'
            ],
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#D1E5FF'
                    },
                    {
                      offset: 1,
                      color: '#FFFFFF'
                    }
                  ],
                  false
                )
              }
            },
            itemStyle: {
              normal: {
                color: '#4165d7'
              }
            },
            lineStyle: {
              normal: {
                width: 2
              }
            }
          }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .count-views {
    .card {
      .echarts {
        height: 50px;
        width: 100%;
      }

      &__container {
        padding: 0;
      }

      &__footer {
        border-top: 0;
      }
    }
  }
</style>
